<template>
  <el-dialog
    v-model="dialogVisible"
    title="计费信息"
    width="600"
    class="qc-custom-dialog"
  >
    <Table
      ref="tableRef"
      :columns="data.columns"
      :isPagination="false"
      :border="true"
    ></Table>
  </el-dialog>
</template>

<script lang="ts" setup name="dialog-price">
import Table from '@/components/table/index.vue';
import { queryCostTemplate } from '@/service/apis/pile';
import { getPriceList } from './price';

const tableRef = ref();
let dialogVisible = ref(false);

const data = reactive({
  columns: [
    {
      prop: 'time',
      label: '时段',
    },
    {
      prop: 'pricePower',
      label: '电费（元/度）',
    },
    {
      prop: 'priceService',
      label: '服务费（元/度）',
    },
  ],
});

const getData = (id: any) => {
  console.log('res--1222-', id);
  queryCostTemplate({ id: id }).then((res: any) => {
    console.log('res---', res);
    nextTick(() => {
      let arr = getPriceList(res);
      tableRef.value?.setTable({
        total: arr.length,
        table: arr,
      });
    });
  });
};

// 显示弹框
const show = (id: any) => {
  dialogVisible.value = true;
  getData(id);
};
// 关闭弹框
const hide = () => {
  dialogVisible.value = false;
};

defineExpose({
  show,
});
</script>